<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>V-FOR</title>
    <script src="vue2610.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <p>v-for </p>
            <li v-for="item in list">{{item}}</li>
            <hr>
            <p>(item,index) in list</p>
            <li v-for="(item,index) in list">index:{{index}} : item:{{item}}</li>
            <hr>
            <li v-for="item in list">$index--{{item}}</li>
            <hr>
            <p> item in user </p>
            <li v-for="item in user">{{item}}</li>
            <hr>
            <p>(item, key) in user</p>
            <li v-for="(item,key) in user">key:{{key}}== item:{{item}}</li>
            <hr>
            <p>(item,key,index) in user</p>
            <li v-for="(item,key,index) in user">{{item}}=={{key}}=={{index}}</li>
            <hr>
            <p> (item, index) in list  v-bind key=index </p>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
    </div>
</body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3, 4, 4],
            user: { "name": 'alex', "age": 20 }
        }
    });
</script>

</html>